<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>商户信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    商家姓名： <input type="text" class="layui-input nameVal" placeholder="请输入商家姓名"/>
                </div>
                <div class="layui-input-inline" >
                    商家账号： <input type="text" class="layui-input numVal" placeholder="请输入商家账号"/>
                </div>
                <div class="layui-input-inline">
                    审核状态： <input type="text" class="layui-input mstateVal" placeholder="请输入审核状态"/>
                </div>
                <div class="layui-input-inline" >
                    营业执照编号： <input type="text" class="layui-input licnumVal" placeholder="请输入营业执照编号"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
        </form>
    </blockquote>
    <table id="mUserCheckTable" lay-filter="mUserCheckTable"></table>
</form>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['form', 'layer', 'table', 'laytpl'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table;
        //用户列表
        var tableIns = table.render({
            elem: '#mUserCheckTable',
            url: 'mUserCheckSelectByPage.do',
            cellMinWidth: 95,
            page: true,
            height: "full-200",
            limits: [10, 15, 20, 25],
            limit: 10,
            id: "mUserCheckTablezz",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'id', title: '商家ID', minWidth: 50, align: "center"},
                {field: 'm_phoneNum', title: '商家账号', minWidth: 200, align: "center"},
                {field: 'm_name', title: '商家名称', minWidth: 100, align: "center"},
                {field: 'm_licenseNum', title: '营业执照编号', align: 'center'},
                {field: 'm_positive', title: '营业执照正面',minWidth: 150, align: 'center',templet:'#aa'},
                {field: 'm_side', title: '营业执照反面',minWidth: 150, align: 'center',templet: '#bb'},
                {field: 'm_state', title: '审核状态',minWidth: 100, align: 'center'},
                {title: '操作', field: 'm_state', fixed: "right", align: "center",templet:function (obj) {
                         if (obj.m_state=="未审核"){
                             return '<a class="layui-btn layui-btn-xs " id="mUserCheckBar" lay-event="check" >审核批准</a>';
                         }else if (obj.m_state=="已审核"){
                             return '<a class="layui-btn layui-btn-xs layui-btn-warm" id="mUserCheckBar" lay-event="check" >取消批准</a>';
                         }
                    }}
            ]]
        });
        //实现搜索功能
        $(".search_btn").click(function () {
            var m_name = $(".nameVal").val();
            var m_phoneNum=$(".numVal").val();
            var m_state=$(".mstatetVal").val();
            var m_licenseNum=$(".licnumVal").val();
            table.reload('mUserCheckTablezz', {
                where: {
                    m_name:m_name,
                    m_phoneNum:m_phoneNum,
                    m_state:m_state,
                    m_licenseNum:m_licenseNum
                }
            });
        });

        table.on("tool(mUserCheckTable)",function (obj) {
            var data=obj.data;
            switch (obj.event) {
                case 'check' :
                    updateMstate(data);
                    break;
            }
        })

        function  updateMstate(data) {

                if (data.m_state=="未审核"){
                    var m_state="已审核";
                    layer.confirm('您确定要审核批准【' + data.m_name + '】这个商家吗？', {icon: 3, title: '提示'}, function (index) {
                       $.ajax({
                           url: 'updateMState.do',
                           data: {id:data.id,m_state:m_state},
                           type: "POST",
                           dataType: "json",
                           success: function (res) {
                               if (res.code == 200) {
                                   layer.msg("审核批准成功");
                                   tableIns.reload();
                               }
                           }
                       })
                    //关闭提示框
                    layer.close(index);
                    });
                }else if (data.m_state=="已审核"){
                    var m_state="未审核";
                    layer.confirm('您确定要取消批准【' + data.m_name + '】这个商家吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            url: 'updateMState.do',
                            data: {id:data.id,m_state:m_state},
                            type: "POST",
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.msg("取消批准成功");
                                    tableIns.reload();
                                }
                            }
                        })
                        //关闭提示框
                        layer.close(index);
                    });
                }


        }

        //显示大图片
        $(document).on("mouseout", ".layui-table-main tr", function (data) {
//可以理解为鼠标移动到table时拿到了该行表格的所有数据，
//然后判断 data.relatedTarget.id 是否等于上面定义的<img> 的id  pitureChange
    if (data.relatedTarget.id == "pitureChange1") {
                //拿到 id 为 pitureChange img的 属性
                var data = data.fromElement.innerHTML;
                //由于是整个img 我们只需要图片地址 进行截取
                var arr = data.split('src="')[1].split('>')[0];
                //判断是否是图片格式，为图片格式则走openMsg分支
                if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(arr)) {
                    openMsg1(arr)
                }
            }else if (data.relatedTarget.id == "pitureChange2") {
                //拿到 id 为 pitureChange img的 属性
                var data = data.fromElement.innerHTML;
                //由于是整个img 我们只需要图片地址 进行截取
                var arr = data.split('src="')[1].split('>')[0];
                //判断是否是图片格式，为图片格式则走openMsg分支
                if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(arr)) {
                    openMsg2(arr)
                }
            }
        });
        function openMsg1(data) {
            var data = '<img id="pitureChange1" style="width: 220px;height: 150px" src="' + data + '"  >'
            layer.msg(data, {
                time: 2000
            });
        }
        function openMsg2(data) {
            var data = '<img id="pitureChange2" style="width: 220px;height: 150px" src="' + data + '"  >'
            layer.msg(data, {
                time: 2000
            });
        }


    });

</script>
<script id="aa" type="text/html">
    <img id="pitureChange1" style="height: 100%"  src="{{d.m_positive}}">
</script>
<script id="bb" type="text/html">
    <img id="pitureChange2" style="height: 100%"  src="{{d.m_side}}">
</script>
</body>
</html>